<template>
	<view class="main">
		<m-swiper :list="banner" :previousMargin="20" :nextMargin="20" :recharge="true"></m-swiper>
		<view class="title">VIP权益说明</view>
		<liu-goods-swiper  :goodsList="privilegeList" :imgWidth="80" :imgHeight="80" @onClick="chooseItem" ></liu-goods-swiper>
		<view class="dev-box vipbox" >
			<button class="rech" >为您量身定制</button> 
		</view>
		<!-- <view class="dev-box card" >
		</view> -->
		<scroll-view scroll-x style="padding:0 4%;width:92%;">
			<view class="recharge">
				<view class="recharge-item" :class="current == index ? 'recharge-item-active': ''" v-for="(item, index) in rechargeOptions" :key="index" :style="{marginLeft: !index ? '0rpx': '34rpx'}" @click="rechargeChange(index)">
					<view class="recharge-tag" v-if="item.showTag">
						<text class="recharge-tag-text">限时特价</text>
					</view>
					<text class="recharge-item-duration">{{ item.duration }}</text>
					<view class="recharge-item-price">
						<text class="rmb">￥</text>
						<text class="recharge-item-price-text">{{ item.price }}</text>
					</view>
					<text class="recharge-item-des" v-for="(desItem, desIndex) in item.des" :key="desIndex">{{ desItem }}</text>
				</view>
			</view>
		</scroll-view>
		<button class="submitBtn" @click="payWithWechat">低至0.22元/天，立即充值</button>
	</view>
</template>

<script>
	import mSwiper from '@/components/m-swiper/m-swiper.vue';

	export default {
		components:{
			mSwiper
		},
		data() {
			return {
				current:0,
				selectedRechargeIndex: 0,
				rechargeOptions: [
					{
						duration: '1年',
						price: 99,
						des: [
							'低至0.27元/天'
						],
						showTag: true
					},
					{
						duration: '2年',
						price: 168,
						des: [
							'限时优惠0.23元/天'
						],
						showTag: true
					},
					{
						duration: '3年',
						price: 248,
						des: [
							'限时优惠0.22元/天'
						],
						showTag: true
					}
				],
				banner: [],
				privilegeList:[{
					 id: 1,
					name: '一对一指导',
					icon: 'https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/recharge/q1.png'
				},{
					id: 2,
					name: '海量兼职',
					icon: 'https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/recharge/q2.png'
				},
				{
					id: 3,
					name: '权益保障',
					icon: 'https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/recharge/q3.png'
				},
				{
					id: 4,
					name: '急速提现',
					icon: 'https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/recharge/q4.png'
				},
				{
					id: 5,
					name: '校园互助',
					icon: 'https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/recharge/q5.png'
				},
				{
					id: 6,
					name: '优先推荐',
					icon: 'https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/recharge/q6.png'
				}
				]
			}
		},
		onLoad(){
			this.getBanners();
		},
		methods: {
			async getBanners() {
				this.banner=[
					{
						value:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/recharge-banner1.png"
					},{
						value:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/recharge-banner2.png"
					},{
						value:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/recharge-banner3.png"
					}
				]
			},
			rechargeChange(index) {
				this.current = index ,
				this.selectedRechargeIndex = index;
			},
			
			async payWithWechat() {
					 const selectedOption = this.rechargeOptions[this.selectedRechargeIndex];
					  const price = selectedOption.price;
		let params1 = {
			money:price
		}
			      // 发起支付前需要获取支付参数，例如预支付订单信息
			     // const params = await this.$apis.payWxCreate( params1)
			
			const params = await this.$apis.payWxCreate( {money:price })
			      // 调用微信支付接口
			    //  const res = await uni.requestPayment(payParams)
				//console.log("支付接口返回"+params.data.timestamp)
				//console.log("支付接口返回sss"+params)
				//console.log("支付接口返回sss"+params.timestamp)
				console.log("支付接口返回2",params)
			   const res =	  uni.requestPayment({					  provider: params.package,					  timeStamp: params.timestamp,					  nonceStr: params.noncestr,					  package: params.partnerid,					  signType: "RSA",					  paySign: params.sign,					  success: (res) => {					uni.showToast({
					  title: '恭喜您成功开通会员',
					})  //业务逻辑
					 // this.$mRouter.push({
						 
					 //     //route: 'your-target-route' ,// 替换为您的目标路由名称或路径
					 // 	route: this.$mRoutesConfig.index
					 	
					 // });
					 // 在第3级页面内 navigateBack，将返回第一层页面
					 uni.navigateBack({
					 	delta: 2
					 });
				setTimeout(() => {
				    this.$mRouter.push({
				      route: this.$mRoutesConfig.index
				    });
				  }, 1000);
				  					  },
					  							  fail: (err) => {
						  uni.showToast({
						    title: '支付失败',err
						  })
						  	console.log("支付err返回",err)						//this.getSubscribe('0')					  }        });
			 
			  }
		}
	}
</script>

<style lang="scss">
.main{
	background-color: #fff;
}
.title{
	font-size: 35upx;
	font-weight: bold;
	line-height: 60upx;
	margin:0 4%;
}
.vipbox{
			background-image: url("https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/vipbox.png");
			background-size: contain;
			background-repeat: no-repeat;
			padding: 32rpx;
			height:50upx;
			.rech{
				background:none;
				border:1px solid #E9F087;
				border-radius: 28upx;
				color:white;
				font-size:28upx;
				line-height:60upx;
				margin-top: -8upx;
				float:right;
			}
		}
.card{
	background-image: url("https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/%E4%BC%9A%E5%91%98%E5%8D%A1%20%281%29.png");
	background-size: contain;
	background-repeat: no-repeat;
	padding: 32rpx;
	height:300upx;
}
.submitBtn{
	
	margin: 40upx 4% 20upx 4%;
	width:92%;
	height:80upx;
	line-height: 80upx;
	color:white;
	border-radius: 35upx;
	background-color: #5FDB7E;
}
	.recharge {
		position: relative;
		margin-bottom: 35rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		
		&-tag {
			position: absolute;
			top: -2rpx;
			left: -2rpx;
			width: 170rpx;
			height: 36rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			background-image: url('https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/recharge/tag.png');
			background-size: 100%;
			
			&-text {
				font-size: 20rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
		
		&-item {
			position: relative;
			padding: 40rpx 0;
			margin-left: 15rpx;
			width: 200rpx;
			height: 230rpx;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			border: solid 2rpx #F2F2F3;
			border-radius: 12rpx;
			
			&-active {
				border-color: #EDD2A9;
				background-color: #FBF1E5;
			}
			
			&-duration {
				margin-bottom: 30rpx;
				font-size: 26rpx;
				color: #1C1C1C;
			}
			
			&-price {
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: baseline;
				
				&-text {
					font-size: 48rpx;
					color: #E3BE83;
				}
			}
			
			&-des {
				font-size: 22rpx;
				color: #A5A3A2;
			}
		}
	}
</style>
